<%@page import="com.milk_shop.model.Package"%>
<%@page import="com.milk_shop.model.Food"%>
<%@page import="java.util.List"%>
<%@page import="com.opensymphony.xwork2.ActionContext"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% 
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<base href="<%=basePath %>"/>
<%List<Food> foods = (List<Food>)ActionContext.getContext().get("foods"); %>
<%List<Package> packages = (List<Package>)ActionContext.getContext().get("packages"); %>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="yes" name="apple-touch-fullscreen">
  <title>购物车</title>
  <link rel="stylesheet" href="css/global.css">
  <script src="js/vue.js"></script>
  <script src="js/httpVueLoader.js"></script>
  <link rel="stylesheet" href="css/order.css">
  <link rel="stylesheet" href="css/back-button.css">
  <link rel="stylesheet" href="https://unpkg.com/element-ui@2.14.1/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/element-ui@2.14.1/lib/index.js"></script>
  <script src="js/jquery.min.js"></script>
  <script src="js/jqueryqr.js"></script>
  <script src="js/qrcode.js"></script>
</head>

<body>
  <div class="page-shopping-cart" id="shopping-cart">
    <h4 class="cart-title">购物清单</h4>
    <div class="cart-product clearfix">
      <table>
        <thead>
          <tr class="cart-product-title">
            <th class="td-check"></th>
            <th class="td-product">商品</th>
            <th>制作时间</th>
            <th class="td-num">数量</th>
            <th class="td-price">折扣价</th>
            <th class="td-total">金额</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in productList" :key="index">
            <td class="td-check"></td>
            <td class="td-product"><img :src="item.pro_img" width="98" height="98">
              <div class="product-info">
                <h3>{{item.name}}</h3>
                <p>推荐理由：{{item.reason}}</p>
              </div>
              <div class="clearfix"></div>
            </td>
            <td>{{item.costTime}} 分钟</td>
            <td class="td-num">
              <div class="product-num">
                <a href="javascript:;" class="num-reduce num-do fl" @click="minus(index)"><span></span></a>
                <input type="text" class="num-input" v-model="item.num" @input="search($event,index
                )"
                  @blur="check($event,index)">
                <a href="javascript:;" class="num-add num-do fr" @click="add(index)"><span></span></a>
              </div>
            </td>
            <td class="td-price">
              <p class="red-text">￥<span class="price-text">{{item.price.toFixed(2)}}</span></p>
            </td>
            <td class="td-total">
              <p class="red-text">￥<span class="total-text">{{(item.price*item.num).toFixed(2)}}</span></p>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="cart-product-info">
      <span>制作时间：{{ getTotal.totalTime }} 分钟</span>
      <a class="keep-shopping" href="/MilkShop/order/getAll">继续购物</a>
      <input type="checkbox" style="margin-left: 30px" name="takeout" v-model="checkVal" id="" @click="takeoutFood" ><span style="margin: 0 30px 0 0;">
        打包(5元)</span>
      <a class="btn-buy fr"  @click="payShop" >去结算</a>
      <p class="fr product-total">￥<span>{{getTotal.totalPrice}}</span></p>
      <p class="fr check-num"><span>{{getTotal.totalNum}}</span>件食物总计：</p>
    </div>
    <el-dialog title="结算" :visible.sync="payVisible">
      <div id="container">
        <canvas width="400" height="400"></canvas>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="payVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitPay" >完成支付</el-button>
      </div>
    </el-dialog>
  </div>
</body>
<script>
  new Vue({
    el: '#shopping-cart',
    data: {
        payVisible: false,
    	checkVal: false,
    	basePrice: 0,
      productList: [
    	  <%for(int i =0;i < foods.size();i++){
    		  Food mFood = foods.get(i);%>
	          {'name': '<%= mFood.getName() %>',
	          'num': 1,
	          "costTime": <%= mFood.getTime() %>,
	          'pro_img': '<%= mFood.getCover() %>',
	          'reason':'<%= mFood.getReason() %>',
	          'price': <%= mFood.getPrice() %>},
    	  <%}%>
      	  <%for(int i =0;i < packages.size();i++){
      		Package mPackage =  packages.get(i) ;%>
  			{
  		          'name': '<%= mPackage.getName()%>',
  		          'num': 1,
  		          "costTime": <%= mPackage.getTime() %>,
  		          'pro_img': '<%= mPackage.getCover() %>',
  		          'reason':'<%= mPackage.getReason() %>',
  		          'price': <%= mPackage.getPrice() %>
  		   },
  		<%}%>

      ]
    },
    computed: {
      getTotal: function () {
        //获取productList中select为true的数据。
        var _proList = this.productList.filter(function (val) { return val.select });
        var totalPrice = 0;
        var totalTime = 0;
        var totalFood = 0;
        for (var i = 0, len = _proList.length; i < len; i++) {
          //总价累加
          if(_proList[i].num !== 0){
            totalTime +=  _proList[i].costTime ;
          }
          totalPrice += _proList[i].num * _proList[i].price;
          totalFood += _proList[i].num;
          
        }
        
        //选择产品的件数就是_proList.length，总价就是totalPrice
        return { totalNum: totalFood, totalPrice: totalPrice + this.basePrice, totalTime: totalTime }
      }
    },
    methods: {
      //数量增加
      add: function (index) {
        this.productList[index].num++;
      },
      //数量减少
      minus: function (index) {
        if (this.productList[index].num > 0) {
          this.productList[index].num--;
        } else {
          this.productList[index].num = 0;
        }
      },
      takeoutFood:function(){
    	  this.checkVal = !this.checkVal
    	  if (this.checkVal) {
    		  this.basePrice = 5
    	  } else {
    		  this.basePrice = 0
    	  }  
      },
      payShop:function() {
          this.payVisible = true
          $("#container").erweima({
            label: '总计金额' + this.getTotal.totalPrice + '元'
          });
       },
       submitPay: function(){
    	   window.location.href="/MilkShop/shoppingcart/clear";
       }
    },
    mounted: function () {
      //为productList添加select（是否选中）字段，初始值为true
      var _this = this;
      //为productList添加select（是否选中）字段，初始值为true
      this.productList.map(function (item) {
        _this.$set(item, 'select', true);
      });
      for (var i = 0, len = this.productList.length; i < len; i++) {
        this.totalTime += this.productList[i].costTime;
      }
    }
  })
</script>
</html>